<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataFlowManager 测试</title>
</head>
<body>
    <h1>DataFlowManager 错误修复测试</h1>
    
    <h2>修复内容：</h2>
    <ul>
        <li>✅ 修复了 computed 属性中的 undefined 错误</li>
        <li>✅ 添加了可选链操作符 (?.) 和默认值</li>
        <li>✅ 将初始化逻辑移到 onMounted 钩子中</li>
        <li>✅ 添加了 try-catch 错误处理</li>
    </ul>
    
    <h2>修复的具体问题：</h2>
    <pre>
原始错误：
DataFlowManager.vue:186 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')

修复前的代码：
const reportCount = computed(() => tableStore.visualizations.length)

修复后的代码：
const reportCount = computed(() => tableStore.reportConfig?.visualizations?.length || 0)
    </pre>
    
    <h2>所有修复的计算属性：</h2>
    <pre>
const dataSourceCount = computed(() => dataCleaningStore.dataSources?.length || 0)
const cleanedDataCount = computed(() => dataCleaningStore.cleanedDataSources?.length || 0)
const modelCount = computed(() => dataModelStore.dataSources?.length || 0)
const reportCount = computed(() => tableStore.reportConfig?.visualizations?.length || 0)
    </pre>
    
    <h2>初始化修复：</h2>
    <pre>
修复前：
// 初始化
updateCurrentStep()

修复后：
// 初始化
onMounted(() => {
  updateCurrentStep()
})
    </pre>
    
    <p><strong>现在可以访问主页查看 DataFlowManager 组件是否正常工作！</strong></p>
    
    <script>
        console.log('DataFlowManager 错误修复完成！');
        console.log('主要修复：');
        console.log('1. 使用可选链操作符避免 undefined 错误');
        console.log('2. 提供默认值 0 作为后备');
        console.log('3. 延迟初始化到 onMounted');
        console.log('4. 添加错误处理机制');
    </script>
</body>
</html>



